<template>
  <!-- 顶部导航栏 -->
  <div class="top-nav">
    <div class="top-nav-left">直聘</div>
    <div class="top-nav-mid top-nav-mid-1">
      <router-link to="/Home">首页</router-link>
    </div>
    <div class="top-nav-mid">
      <router-link to="/Career">职业</router-link>
    </div>
    <div class="top-nav-mid top-nav-mid-2">公司</div>
    <div class="top-nav-mid">
      <router-link to="/Search">搜索</router-link>
    </div>
    <div class="top-nav-right top-nav-right-1">
      <router-link to="/Resume">简历</router-link>
    </div>
    <div class="top-nav-right">
      <router-link to="/Resume">个人</router-link>
    </div>
    <div class="top-nav-right top-cir"><router-link to="/Resume"></router-link>
    </div>
  </div>
  <div class="main">
    <!-- 搜索框 -->
    <div class="search">
      <div class="search-left">
        <div class="search-left-1">职业类型</div>
        <!-- <div class="search-left-2" value="搜索职位、公司"></div> -->
        <input type="text" value="搜素职位、公司">
      </div>
      <div class="search-right">搜索</div>
    </div>
    <!-- 中间列表 -->
    <div class="list">
      <ul>
        <li>公司地点：</li>
        <li>全部城市</li>
        <li>北京</li>
        <li>上海</li>
        <li>天津</li>
        <li>广州</li>
        <li>深圳</li>
        <li>杭州</li>
      </ul>
      <ul>
        <li>行业类型：</li>
        <li>不限</li>
        <li>电子商务</li>
        <li>游戏</li>
        <li>大数据</li>
        <li>医疗健康</li>
        <li>计算机软件</li>
        <li>其他行业</li>
      </ul>
      <ul>
        <li>融资阶段：</li>
        <li>不限</li>
        <li>未融资</li>
        <li>天使轮</li>
        <li>A轮</li>
        <li>B轮</li>
        <li>C轮</li>
        <li>D轮及以上</li>
        <li>已上市</li>
        <li>无需融资</li>
      </ul>
      <ul>
        <li>公司规模：</li>
        <li>不限</li>
        <li>0-20人</li>
        <li>20-99人</li>
        <li>100-499人</li>
        <li>500-999人</li>
        <li>1000人以上</li>
      </ul>
    </div>
    <!-- 中间列表图标 -->
    <div class="list-pic">
      <div class="list-pic-line1">
        <div class="pic-box">
          <div class="pic-box-top">
            <div class="img-box">
              <img src="/src/assets/SF.png" alt="">
            </div>
            <div class="pic-box-top-right">
              <div class="pic-box-top-right-text">
                <router-link to="/Enter2">顺丰速运</router-link>

              </div>
              <div class="pic-box-top-right-text2">
                <div class="text2-in">已上市</div>
                <div class="text2-in">物流/仓库</div>
              </div>
            </div>
          </div>
          <div class="pic-box-mid"></div>
          <div class="pic-box-bottom">热招&nbsp;&nbsp;收派员6-10k</div>
        </div>
        <div class="pic-box">
          <div class="pic-box-top">
            <div class="img-box">
              <img src="/src/assets/SF.png" alt="">
            </div>
            <div class="pic-box-top-right">
              <div class="pic-box-top-right-text">顺丰速运</div>
              <div class="pic-box-top-right-text2">
                <div class="text2-in">已上市</div>
                <div class="text2-in">物流/仓库</div>
              </div>
            </div>
          </div>
          <div class="pic-box-mid"></div>
          <div class="pic-box-bottom">热招&nbsp;&nbsp;收派员6-10k</div>
        </div>
        <div class="pic-box">
          <div class="pic-box-top">
            <div class="img-box">
              <img src="/src/assets/SF.png" alt="">
            </div>
            <div class="pic-box-top-right">
              <div class="pic-box-top-right-text">顺丰速运</div>
              <div class="pic-box-top-right-text2">
                <div class="text2-in">已上市</div>
                <div class="text2-in">物流/仓库</div>
              </div>
            </div>
          </div>
          <div class="pic-box-mid"></div>
          <div class="pic-box-bottom">热招&nbsp;&nbsp;收派员6-10k</div>
        </div>
        <div class="pic-box">
          <div class="pic-box-top">
            <div class="img-box">
              <img src="/src/assets/SF.png" alt="">
            </div>
            <div class="pic-box-top-right">
              <div class="pic-box-top-right-text">顺丰速运</div>
              <div class="pic-box-top-right-text2">
                <div class="text2-in">已上市</div>
                <div class="text2-in">物流/仓库</div>
              </div>
            </div>
          </div>
          <div class="pic-box-mid"></div>
          <div class="pic-box-bottom">热招&nbsp;&nbsp;收派员6-10k</div>
        </div>
      </div>
      <div class="list-pic-line1">
        <div class="pic-box">
          <div class="pic-box-top">
            <div class="img-box">
              <img src="/src/assets/SF.png" alt="">
            </div>
            <div class="pic-box-top-right">
              <div class="pic-box-top-right-text">顺丰速运</div>
              <div class="pic-box-top-right-text2">
                <div class="text2-in">已上市</div>
                <div class="text2-in">物流/仓库</div>
              </div>
            </div>
          </div>
          <div class="pic-box-mid"></div>
          <div class="pic-box-bottom">热招&nbsp;&nbsp;收派员6-10k</div>
        </div>
        <div class="pic-box">
          <div class="pic-box-top">
            <div class="img-box">
              <img src="/src/assets/SF.png" alt="">
            </div>
            <div class="pic-box-top-right">
              <div class="pic-box-top-right-text">顺丰速运</div>
              <div class="pic-box-top-right-text2">
                <div class="text2-in">已上市</div>
                <div class="text2-in">物流/仓库</div>
              </div>
            </div>
          </div>
          <div class="pic-box-mid"></div>
          <div class="pic-box-bottom">热招&nbsp;&nbsp;收派员6-10k</div>
        </div>
        <div class="pic-box">
          <div class="pic-box-top">
            <div class="img-box">
              <img src="/src/assets/SF.png" alt="">
            </div>
            <div class="pic-box-top-right">
              <div class="pic-box-top-right-text">顺丰速运</div>
              <div class="pic-box-top-right-text2">
                <div class="text2-in">已上市</div>
                <div class="text2-in">物流/仓库</div>
              </div>
            </div>
          </div>
          <div class="pic-box-mid"></div>
          <div class="pic-box-bottom">热招&nbsp;&nbsp;收派员6-10k</div>
        </div>
        <div class="pic-box">
          <div class="pic-box-top">
            <div class="img-box">
              <img src="/src/assets/SF.png" alt="">
            </div>
            <div class="pic-box-top-right">
              <div class="pic-box-top-right-text">顺丰速运</div>
              <div class="pic-box-top-right-text2">
                <div class="text2-in">已上市</div>
                <div class="text2-in">物流/仓库</div>
              </div>
            </div>
          </div>
          <div class="pic-box-mid"></div>
          <div class="pic-box-bottom">热招&nbsp;&nbsp;收派员6-10k</div>
        </div>
      </div>
    </div>
  </div>
  <!-- 底部 -->
</template>

<script>
export default {
    name: "enterprise",
    data() {

    },
}
</script>

<style>
body {
  background-color: #F4F5FA;
}
/* 顶部导航栏 */
.top-nav {
  display: flex;
  width: 100%;
  height: 67px;
  background-color: hsla(232, 47%, 56%, 1);
}

.top-nav-left {
  line-height: 67px;
  margin-left: 115px;
  font-size: 36px;
  color: hsla(0, 0%, 100%, 1);

}

.top-nav-mid {
  line-height: 67px;
  padding-right: 80px;
  font-size: 24px;
  color: hsla(0, 0%, 100%, 1);
}

.top-nav-mid-1 {
  margin-left: 205px;
}
.top-nav-mid-2{
  color: #000;
}

.top-nav-right {
  line-height: 67px;
  padding-right: 17px;
  font-size: 24px;
  color: hsla(0, 0%, 100%, 1);
}

.top-nav-right-1 {
  margin-left: 445px;
}

.top-cir {
  margin-top: 7px;
  width: 51px;
  height: 46px;
  background: #F2EFEF;
  border-radius: 50%;
  border: 1px solid #F2EFEF;
}



/* 主体 */
.main{
  width: 71.5%;
  margin: 0 auto;
}
/* 搜索框 */
.search {
  display: flex;
  height: 95px;
  margin: 0 auto;
  margin-top: 84px;
  background-color: hsla(232, 47%, 56%, 1);
  border-radius: 30px;
}

.search-left {
  margin: 5px;
  border-radius: 30px;
  width: 88%;
  background-color: hsla(0, 0%, 100%, 1);
}

.search-left-1 {
  width: 182px;
  height: 85px;
  border-radius: 30px 0px 0px 30px;
  font-size: 24px;
  line-height: 85px;
  padding-left: 34px;
  background-color: hsla(232, 77%, 85%, 1);
  color: black;
}
input {
        position: relative;
        left: 182px;
        top: -85px;
        outline: none;
        width: 85%;
        height: 100%;
        border: 0;
        border-radius: 0px 30px 30px 0px;
        font-size: 24px;
        line-height: 85px;
        color: #ACB6F7;
        text-indent: 32px;
      }
.search-right {
  line-height: 94px;
  padding-left: 35px;
  font-size: 30px;
  color: hsla(0, 0%, 100%, 1);
}
  /* 中间列表 */
  .list{
    display: flex;
    flex-wrap: wrap;
    margin-top: 50px;
    list-style-type: none;
  }
  ul{
    display: flex;
    height: 18px;
font-family: DengXian;
font-weight: 400;
font-size: 18px;
color: #000000;
list-style-type: none;
margin-bottom: 26px;
  }
  li{
    padding-left: 26px;
  }
  /* 中间列表图标 */
  .list-pic{
margin-right: -20px;
  }
  .pic-box{
    width: 300px;
height: 178px;
background-color: #fff;
border-radius: 11px;
 margin-left: 45px; 
margin-top: 39px;
  }
  img{
    height: 100%;
    width: 100%;
  }
  .pic-box-top{
    display: flex;
   padding-top: 36px;
   padding-left:13px ;
   padding-bottom: 13px;
  }
  .img-box{
    width: 60px;
    height: 60px;
    border-radius: 11px;
    /* background-color: #000; */
  }
  .pic-box-top-right{
    margin-left: 13px;
  }
  .pic-box-top-right-text{
height: 20px;
font-family: DengXian;
font-weight: 400;
font-size: 20px;
color: #9C6ADE;
margin-bottom: 13px;
  }
  .pic-box-top-right-text2{
    display: flex;
  }
  .text2-in{
     background-color: rgba(238, 236, 236, 0.985);
  font-size: 15px;
  padding: 0 7px;
  margin-right: 5px;
  margin-bottom: 5px;
  line-height: 28px;
  color: #000;
  height: 28px;
  border-radius: 6px;
  border: 1px solid hsla(230, 37%, 97%, 1);
  }
  .pic-box-mid{
    height: 2px;
    width: 90%;
    margin-left: 13px;
    margin-bottom: 10px;
      background: #bbb9bf;
border: 1px solid #bbb9bf;
  }
  .pic-box-bottom{
text-align: center;
font-size: 22px;
color: #747276;
  }
  .list-pic-line1{
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 26px
  }
  /* 底部 */
</style>